<template>

  <div>
    <div>
      <!-- 没有商品时  展示 -->
      <div v-if="!cartPage.cartList.length">
        <van-empty image="network" image-size="80" description="购物车空空如也">
          <van-button round type="primary" class="bottom-button">点击去首页购物</van-button>
        </van-empty>
      </div>

      <!-- 购物车商品展示 -->
      <div class="box" v-if="cartPage.cartList.length">
        <div class="cartList">
          <!-- 这是头部 -->
          <div class="cartHeader"
            style="padding: 15px  10px; display: flex; font-size: 15px;justify-content: space-between;">
            <div style="display: flex;">
              <van-checkbox checked-color="#ee0a24" v-model="OrderAll"></van-checkbox>
              <div style="padding-left: 8px;font-weight: 600;">99元包邮</div>
            </div>
            <div>
              <div>已满99元包邮 <span style="color: red;padding-left: 8px;">去逛逛 ></span></div>
            </div>

          </div>

          <!-- 每个商品 -->
          <div class="cartItem" style="display: flex;padding-left: 10px;" v-for="(item, index) in cartPage.cartList"
            :key="item.id">
            <!-- 每一个商品 -->
            <van-checkbox v-model="item.isChecked" checked-color="#ee0a24" @click="getCheckOneCart(item)"></van-checkbox>
            <van-swipe-cell>

              <van-card :price="item.skuPrice" :desc="item.skuName" title="国产手机" class="goods-card" :thumb="item.imgUrl">

                <template #bottom>
                  <van-stepper style="float: right;" integer theme="round" min="1" max="200" button-size="20"
                    v-model="item.skuNum" @change="changeNum(item, $event)" />
                </template>
              </van-card>
              <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="delCart(item.skuId, index)" />
              </template>
            </van-swipe-cell>
          </div>

        </div>
      </div>

    </div>
    <!-- 底部结算区 -->
    
    <van-submit-bar v-if="cartPage.cartList.length" :price="totalPrice * 100" :button-text="` 结算(${callUp}) `"
      @submit="onSubmit">
      <van-checkbox checked-color="#ee0a24" v-model="allChecked"></van-checkbox>
      <span>全选</span>
    </van-submit-bar>

  </div>

  <div style="height: 300px;"></div>

<div>
  Cart
</div>

</template>
<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: 'Cart',
})
</script>
<script lang="ts" setup>
import { onMounted, computed } from 'vue'
import {
  CartItem,
  CheckCartOne,
  BatchCheckCart,
  DeleteCart,
  addToCart
} from '@/api/cart/index'
import { useRouter } from "vue-router";
import { useCartList } from '@/stores/cart'
const cartPage = useCartList()
const router = useRouter();
//结算
const onSubmit = () => {
  router.push({
    path: "/trade"
  });
}

//页面一加载就获取购物车数据
onMounted(() => {
  cartPage.getCartList()
})
//计算总价
const totalPrice = computed(() => {
  return cartPage.cartList.reduce((total, item) => {
    if (item.isChecked) {
      return total + item.skuNum * item.skuPrice;
    } else {
      return total;
    }
  }, 0);
});
//全选状态
const allChecked = computed({
  get: () => cartPage.cartList.every(item => item.isChecked),
  set: async (val) => {
    let isChecked = val === true ? 1 : 0
    let skuIdList = cartPage.cartList.map(item => item.skuId)
    await BatchCheckCart(isChecked, skuIdList as number[])
    cartPage.cartList.forEach(item => item.isChecked = isChecked)
  }
})
//99元包邮
const OrderAll = computed(() => {
  return cartPage.cartList.some(item => item.isChecked)
})
//计算已选中商品数量
const callUp = computed(() => {
  return cartPage.cartList.reduce((total, item) => {
    if (item.isChecked) {
      return total + item.skuNum
    } else {
      return total;
    }
  }, 0);
})

//状态切换
const getCheckOneCart = async (item: CartItem) => {
  let { skuId, isChecked } = item
  let newIsCheck = isChecked ? 1 : 0
  await CheckCartOne(skuId, newIsCheck)
  item.isChecked = newIsCheck
}

//删除单个
const delCart = async (skuId: number, index: number) => {
  await DeleteCart(skuId)
  cartPage.cartList.splice(index, 1)
}

//数量改变
const changeNum = async (good: CartItem, event: any) => {
  let { skuId } = good
  await addToCart(skuId, event)
}
</script>

<style scoped  lang="scss" >
.van-submit-bar {
  margin-bottom: 100px;
}

.bottom-button {
  width: 160px;
  height: 40px;
}

.van-submit-bar__bar {
  text-align: center;
  position: fixed;
  right: 0;
  bottom: 55px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: content-box;
  height: var(--van-action-bar-height);
  background: var(--van-action-bar-background);
}

.box {
  margin: 10px;
  background-color: #f4f4f4;
  border-radius: 15px;
}

.delete-button {
  height: 100%;
}

.goods-card {
  margin: 0;
}

.van-card {
  width: 325px;
}

</style>